<template>
  <div class="home-layout" v-loading="restartLoading" element-loading-background="rgba(122, 122, 122, 0.8)" type="none">
    <div class="restart_time" v-if="restartLoading">{{ restartTime }}</div>
    <el-container >
      <!-- 左侧 -->
      <el-aside class="left">
        <div class="top">
          <div class="block-title">
            <span class="title-icon purple-bg">
              <el-icon :size="16" color="#fff">
                <Operation />
              </el-icon>
            </span>
            <span class="title-text">操作模块</span>
          </div>
          <div class="operation-block">
            <div class="operation-block-1">
              <!-- 开始录制 -->
              <div class="operation-block-item" v-if="!isStartFlag" @click="startRecording">
                <span class="video-icon purple-bg"><el-icon :size="30" color="#fff">
                    <VideoPlay />
                  </el-icon></span>
                <p class="mt-1.5 text-sm">开始录制</p>
              </div>
              <!-- 结束录制 -->
              <div class="operation-block-item" v-else @click="stopRecording">
                <span class="video-icon green-bg"><el-icon :size="30" color="#fff">
                    <VideoPause />
                  </el-icon></span>
                <p class="mt-1.5 text-sm">结束录制</p>
              </div>
              <div class="operation-block-item time-block">
                <span :class="[isStartFlag ? 'greenText' : 'purpleText', 'time', 'text-2xl']">{{
                formatTime(recordingTime) }}</span>
              </div>
            </div>
            <div class="operation-block-2">
              <div class="operation-block-item" @click="openSettingDrawer">
                <span class="video-icon" style="background:#a3a3a3"><el-icon :size="30" color="#fff">
                    <Setting />
                  </el-icon></span>
                <p class="mt-1.5 text-sm">设置事件</p>
              </div>
              <div class="operation-block-item" @click="restartFn">
                <span class="video-icon red-bg"><el-icon :size="30" color="#fff">
                    <RefreshLeft />
                  </el-icon></span>
                <p class="mt-1.5 text-sm">重启数采</p>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="block-title">
            <span class="title-icon purple-bg">
              <el-icon :size="16" color="#fff">
                <Document />
              </el-icon>
            </span>
            <span class="title-text">已设置的事件</span>
          </div>
          <div class="setting-data-block">
            <!-- 显示 已设置的信息0407 -->
            <div class="setting-content mt-6" v-if="settingData.eventGroupLists">
              <el-descriptions class="margin-top" :column="1" size="default" border>
                <el-descriptions-item label="mcap包生成周期" v-if="settingData.maxDuration">{{ settingData.maxDuration + 's'
                  }}</el-descriptions-item>
                <el-descriptions-item label="录制速腾激光雷达" v-if="settingData.recordStPcap">是</el-descriptions-item>
                <el-descriptions-item label="录制音视频信号" v-if="settingData.recordVideo">是</el-descriptions-item>
                <el-descriptions-item label="录制真值pcap" v-if="settingData.recordZzPcap">是</el-descriptions-item>
                <el-descriptions-item label="canfd信号(60S/包)"
                  v-if="settingData.recordCanfdSplit">是</el-descriptions-item>
                <el-descriptions-item label="canfd信号(不分包)"
                  v-if="settingData.recordCanfdNotSplit">是</el-descriptions-item>
                <el-descriptions-item label="录制事件组名称" v-if="settingData.eventGroupLists">
                  <el-tag type="info" class="setting-event-group-name" size="large"
                    v-for="item in settingData.eventGroupLists">{{ item }}</el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <!-- 无设置的内容 -->
            <div class="no-setting-data" v-else>
              暂无设置的事件信息
            </div>
          </div>
          <div class="voice-message-block">
            <VoiceMessage />
          </div>
        </div>
      </el-aside>
      <!-- 中间模块 -->
      <el-main class="middle">
        <div class="block-title">
          <span class="title-icon purple-bg">
            <el-icon :size="16" color="#fff">
              <Document />
            </el-icon>
          </span>
          <span class="title-text">录制文件2</span>
        </div>
        <div class="record-files-block" v-loading="videoLoading">
          <p v-if="!isStartFlag" class="mt-3 text-sm text-center">暂无数据</p>
          <div v-else class="record-content">
            <p class="file-location">任务ID：{{ taskUUID }}</p>
            <p class="file-location">
              <span>文件地址：{{ currentFolderName }}</span>

              <el-tooltip placement="bottom">
                <template #content> 1.录制结束后点击此按钮拷贝日志；<br />2.录制过程中可点击按钮记录问题日志；<br />3.点击按钮后等待1～2分钟等待日志拷贝完成。 </template>
                <el-button type="primary" color="#6180f4" class="btn-history" size="small" @click="packOrinLog()">
                  日志拷贝
                </el-button>
              </el-tooltip>
            </p>
            <div class="bag-all-list" v-loading="recordDataLoading" element-loading-background="transparent">
              <div class="bag-list" v-for="item in dataList" :key="item">
                <div class="bag-title">
                  <div class="group-name">{{ item.groupName }}</div>
                  <div :class="['bag-status']">{{
                item.groupMsg }}</div>
                </div>
                <div class="bag-content" style="overflow:auto">
                  <el-table :data="item.bags" style="width: 100%">
                    <el-table-column prop="bagname" label="包名" width="350" />
                    <el-table-column prop="size" label="大小" width="150" />
                    <el-table-column prop="normal" label="录制正常/异常" width="150">
                      <template #default="scope">
                        <span :class="[scope.row.normal ? 'greenText' : 'redText']">{{ scope.row.normal ? '正常' : '异常'
                          }}&nbsp;</span>
                        <!-- 帧率异常的popover -->
                        <el-popover v-if="!scope.row.normal" placement="bottom" title="帧率异常" :width="600"
                          trigger="click">
                          <template #reference>
                            <el-icon>
                              <QuestionFilled color="#ef4444" size="16px" />
                            </el-icon>
                          </template>
                          <el-table :data="getErrorMsg(scope.row.errmsg)" class="zl-info-status">
                            <el-table-column prop="eventname" label="event" min-width="100">
                              <template #default="scope">
                                <el-tooltip effect="dark" :content="scope.row.eventname" placement="top-start"
                                  popper-class="home-tooltip">
                                  <div class="popover-event-name">{{ scope.row.eventname }}</div>
                                </el-tooltip>
                              </template>
                            </el-table-column>
                            <el-table-column prop="status" label="包里计算值/预期配置值" min-width="60">
                              <template #default="scope">
                                {{ scope.row.zl + '/' + (scope.row.defaultfreq == 0 ? '待配置' : scope.row.defaultfreq) }}
                              </template>
                            </el-table-column>
                            <el-table-column prop="status" label="状态" min-width="30">
                              <template #default="scope">
                                <span class="event-status"
                                  :class="{ 'green-bg': scope.row.normal, 'red-bg': !scope.row.normal }"></span>
                              </template>
                            </el-table-column>
                          </el-table>
                        </el-popover>
                        <!-- 帧率异常的popover end-->
                      </template>
                    </el-table-column>
                    <el-table-column prop="" label="是否转换record" width="">
                      <template #default="scope">
                        <div class="recordStatusText" :class="getRecordStatusColor(scope.row.transToRecordStatus)">{{
                formatTransRecordText(scope.row.transToRecordStatus) }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="" label="是否进nas" width="150">
                      <template #default="scope">
                        <div v-if="scope.row.pcapCopyToNasStatus == 0" class="nasStatusText redText">未进NAS</div>
                        <div v-if="scope.row.pcapCopyToNasStatus == 1" class="nasStatusText greenText">已进NAS</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="" label="外接盘状态" width="150">
                      <template #default="scope">
                        <div class="statusText" :class="getExStorageStatusColor(scope.row.externalStorageCopyStatus)">{{
                formatExStorageText(scope.row.externalStorageCopyStatus) }}</div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-main>
      <el-aside class="right">
        <div class="top">
          <div class="block-title">
            <span class="title-icon purple-bg">
              <el-icon :size="16" color="#fff">
                <Position />
              </el-icon>
            </span>
            <span class="title-text">版本信息</span>
          </div>
          <div class="vehicle-info-block">
            <ul class="status-ul">
              <li class="status-block">
                <p class="first-line font-bold mt-1.25 mb-1.5">版本信息</p>
                <p>数采工具版本号： {{ scVersion }}
                  <el-tooltip class="box-item" effect="dark" content="有新版本，请点击进入版本列表更新" placement="top"
                    v-if="showNewVersionMessage">
                    <span class="title-icon update-icon purple-bg center-icon" @click="openVersionModal">
                      <el-icon :size="14" color="#fff">
                        <Top />
                      </el-icon>
                    </span>
                  </el-tooltip>
                </p>

                <p>NOS版本号：
                  <p class="break-text" style="display:inline">{{ nosVersion }}</p>                 
                  <el-icon :size="14" style="margin-left:5px;cursor:pointer" clor="#6366f1" @click="copyNosVersion"><DocumentCopy /></el-icon>
                </p>
                <el-button type="primary" color="#6366f1" size="small" plain
                  @click="openVersionModal">查看版本列表</el-button>
              </li>
            </ul>
          </div>
        </div>
        <div class="bottom">
          <div class="block-title">
            <span class="title-icon purple-bg">
              <el-icon :size="16" color="#fff">
                <Document />
              </el-icon>
            </span>
            <span class="title-text">车辆信息和状态</span>
          </div>
          <div class="state-block">
            <ul class="status-ul">

              <li class="status-block car-info">
                <p>车号： {{ diskInfoData.vehicle }}</p>
                <p>挂载Nas目录： {{ diskInfoData.mountdiskinfo || '/opt/usr/Nas/' }}</p>
                <p>磁盘总量： {{ diskInfoData.totaldiskamount ? diskInfoData.totaldiskamount + 'G' : '' }}</p>
                <p>剩余磁盘量：
                  <span :class="{ 'redText': diskInfoData.remaindiskamount && diskInfoData.remaindiskamount < 2000 }">
                    {{ diskInfoData.remaindiskamount ? diskInfoData.remaindiskamount + 'G' : '' }}
                  </span>
                </p>
                <p>挂载详情
                  <!--  -->
                  <el-tooltip v-if="diskInfoData.totaldiskamount && diskInfoData.totaldiskamount < 2000"
                    class="box-item" effect="dark" content="未挂载nas? 将影响数据存储" placement="top-start"
                    popper-class="home-tooltip">
                    <el-icon>
                      <QuestionFilled color="#ef4444" size="18px" style="vertical-align: middle;" />
                    </el-icon>
                  </el-tooltip>：
                <p class="ellipsis-text" style="margin-left:8px">
                  <span
                    :class="[nasStatusObj.mdcNasStatus && nasStatusObj.gkjNasStatus && nasStatusObj.samePath == 2 ? 'yellowText' : nasStatusObj.mdcNasStatus ? 'greenText' : 'redText']">
                    ORIN&nbsp;&nbsp;
                  </span>
                  <el-tooltip :content="nasStatusObj.mdcPath" placement="top-start">
                    <b>{{ nasStatusObj.mdcPath }}</b>
                  </el-tooltip>

                </p>
                <p class="ellipsis-text" style="margin-left:8px">
                  <span
                    :class="[nasStatusObj.mdcNasStatus && nasStatusObj.gkjNasStatus && nasStatusObj.samePath == 2 ? 'yellowText' : nasStatusObj.gkjNasStatus ? 'greenText' : 'redText']">
                    工控机&nbsp;&nbsp;
                  </span>
                  <el-tooltip :content="nasStatusObj.gkjPath" placement="top-start">
                    <b>{{ nasStatusObj.gkjPath }}</b>
                  </el-tooltip>
                </p>
                <el-button type="primary" color="#6366f1" size="small" plain @click="singleNasFn">一键挂载</el-button>
                </p>
              </li>
              <li class="status-block">
                <p class="first-line font-bold mt-1.25 mb-1.5">状态信息</p>
                <p>ORIN通讯状态：
                  <span :class="[toolStateFlag ? 'green-bg' : 'red-bg', 'title-icon', 'note-icon', 'center-icon']">
                    <el-icon :size="14" color="#fff">
                      <Check v-if="toolStateFlag" />
                      <CloseBold v-else />
                    </el-icon>
                  </span>
                </p>
                <p>云端通信状态：
                  <span :class="[cloudStateFlag ? 'green-bg' : 'red-bg', 'title-icon', 'note-icon', 'center-icon']">
                    <el-icon :size="14" color="#fff">
                      <Check v-if="cloudStateFlag" />
                      <CloseBold v-else />
                    </el-icon>
                  </span>
                </p>
                <p>
                <div v-if="nasStatusFlag" style="display:inline">nas盘挂载状态：</div>
                <el-popover v-else placement="top" :width="400" trigger="click">
                  <template #reference>
                    <div style="display:inline"><el-icon style="font-size:22px;vertical-align: middle">
                        <CirclePlusFilled color="#6d6e71" />
                      </el-icon>&nbsp;&nbsp;nas盘挂载状态 ：</div>
                  </template>
                  <el-table :data="nasStatusList" class="zl-info-status">
                    <el-table-column prop="name" label="名称" />
                    <el-table-column prop="status" label="状态" width="60">
                      <template #default="scope">
                        <span class="event-status"
                          :class="{ 'green-bg': scope.row.status, 'red-bg': !scope.row.status }"></span>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-popover>
                <span :class="[nasStatusFlag ? 'green-bg' : 'red-bg', 'title-icon', 'note-icon', 'center-icon']">
                  <el-icon :size="14" color="#fff">
                    <Check v-if="nasStatusFlag" />
                    <CloseBold v-else />
                  </el-icon>
                </span>
                </p>
              </li>

            </ul>
          </div>
        </div>
      </el-aside>
    </el-container>
    <!-- 设置录制事件的抽屉 -->
    <el-drawer size="35%" v-model="drawer" title="录制设置" direction="ltr" :before-close="handleCloseSettingDrawer">
      <VideoParams :reviewParamsForm="reviewParamsForm"
        @closeSettingDrawer="closeSettingDrawer" />
    </el-drawer>
    <!-- 查看版本列表 -->
    <el-dialog :close-on-click-modal="false" v-model="versionModalVisible" title="版本列表" width="50%">
      <VersionList :versionList="dcVersionList" @closeVersionModal="closeVersionModal" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import { querySettingData, startRecordingPacket, folderName, echoRecordingPacketInfo, restart, getRecordState, stopRecordingPacket, getCollectionVersion, getADFVersion, getDcVersion, toolState, diskInfo, cloudStatus, nasStatus, singleNasAPI, packOrinLogAPI } from '@/api/index.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import VideoParams from '@/components/VideoParams.vue'
import VersionList from '@/components/VersionList.vue'
import VoiceMessage from '@/components/VoiceMessage.vue'
import { formatTime, copyToClip } from '@/utils/util.js'

let drawer = ref(false)
let hasSettingDataFlag = ref(false)
let videoLoading = ref(false)    // 录制loading
let restartLoading = ref(false)
let isStartFlag = ref(false)   // 开始录制flag
let recordingTime = ref(0)  //录制的计时
let restartTime = ref(10)  //数采重启后loading的倒计时
let taskUUID = ref('')    // 任务id
let currentFolderName = ref('')    // 录取的文件夹地址
let settingData = ref({})  // 已设置的事件组等
let dataList = ref([])  // 录制的数据包
let tagInfos = ref([])  // 录制的打标签
let packetTimer = ref(null)  //获取包的定时器
let recordingTimer = ref(null)  //录制的定时器
let restartTimer = ref(null)  //数采重启的倒计时的定时器
let isRecordFlag = ref(false)  // 是否有录制
let reviewParamsForm = ref({})  // 回显录制参数
// let reviewTreeGroupData = []  // 回显录制事件
let scVersion = ref('')   // 数采当前版本
let nosVersion = ref('')   // nos版本
let dcVersionList = ref([])  // 版本列表
let showNewVersionMessage = ref(false)   // 显示新版本消息框
let versionModalVisible = ref(false)        // 版本列表弹窗显示
let lastVersion = ref('')        // 最新版本
let toolStateFlag = ref(false)  // 工具状态
let cloudStateFlag = ref(false)  // 云端状态
let diskInfoData = ref({})  // 磁盘数据
let toolStateTimer = ref(null)  // 工具状态定时器
let cloudStateTimer = ref(null)  // 云状态定时器
let nasStatusFlag = ref(false)
let nasStatusObj = ref({})        // nas状态返回数据
let nasStatusList = ref([])        // nas状态返回数据
let nasStatusTimer = ref(null)     // nas状态定时器
let recordDataLoading = ref(false)  // 录制数据未返回前，显示loading
// let historyDialog = ref(false)      // 采集记录的dialog
watch(showNewVersionMessage, (newVal, oldVal) => {
  if (newVal) {
    ElMessage({
      message: `有新版本 ${lastVersion.value}，请查看并升级！`,
      type: 'success',
      grouping: true,
      duration: 0
    })
  } else {
    ElMessage.closeAll()
  }
})
onMounted(() => {
  getInitRecordingTime(),   // 获取录制任务
    getSCVersion(),           // 获取当前数采版本
    getNosVersion(),           // 获取当前nos版本
    getSettingData(),
    getDcVersionList(),          // 获取版本列表   
    getToolState(),    //获取工具状态
    getCloudState(),  //获取云端状态
    getNasState(),    // 获取nas盘挂载状态
    nasStatusTimer.value = setInterval(() => {
      getNasState()
    }, 30000)
  // 每60s获取一次版本信息
  setInterval(() => { getDcVersionList() }, 60000)
  setInterval(() => { getSettingData() }, 60000)
  // 每隔3秒获取一次工具状态、云状态
  if (toolStateTimer.value) {
    clearInterval(toolStateTimer.value)
  } else {
    // 在录制中，则定时调用工具状态
    if (isRecordFlag.value) {
      toolStateTimer.value = setInterval(() => {
        getToolState()
      }, 3000)
    }
  }
  if (cloudStateTimer.value) {
    clearInterval(cloudStateTimer.value)
  } else {
    // 在录制中，则定时调用云状态
    if (isRecordFlag.value) {
      cloudStateTimer.value = setInterval(() => {
        getCloudState()
      }, 3000)
    }
  }
  document.addEventListener('visibilitychange', handleVisiable)
})
onBeforeUnmount(() => {
  clearInterval(packetTimer.value);
  clearInterval(recordingTimer.value);
  clearInterval(restartTimer.value);
  packetTimer.value = null;
  recordingTimer.value = null;
  restartTimer.value = null;
})

// record状态color
const getRecordStatusColor = (val) => {
  if (val == -1) {
    return 'redText'
  } else if (val == 0) {
    return 'yellowText'
  } else if (val >= 1 && val <= 99) {
    return 'blueText'
  } else if (val == 100) {
    return 'greenText'
  } else {
    return
  }
}
const formatTransRecordText = (val) => {
  if (val == -1) {
    return '转换record失败'
  } else if (val == 0) {
    return '待转换record'
  } else if (val >= 1 && val <= 99) {
    return '转换record中'
  } else if (val == 100) {
    return '转换record成功'
  } else {
    return
  }
}
// 外接盘状态color
const getExStorageStatusColor = (val) => {
  if (!val) {
    return 'grayText'
  } else if (val == -1) {
    return 'redText'
  } else if (val == 100) {
    return 'greenText'
  } else {
    return 'yellowText'
  }
}
const formatExStorageText = (val) => {
  if (!val) {
    return '无需拷贝'
  } else if (val == -1) {
    return '拷贝失败'
  } else if (val == 100) {
    return '拷贝成功'
  } else {
    return '等待拷贝'
  }
}
const openSettingDrawer = () => {
  drawer.value = true
}
const handleCloseSettingDrawer = () => {
  drawer.value = false
}
// 离开页面事件
const handleVisiable = (e) => {
  if (!isStartFlag.value) return
  switch (e.target.visibilityState) {
    case 'hidden':
      let startTime = new Date().getTime()
      localStorage.setItem('leaveTime', startTime)
      console.log('离开时的时间戳', startTime)
      clearInterval(recordingTimer.value)
      break;
    case 'visible':
      let endTime = new Date().getTime()
      let leaveTime = Math.floor((parseInt(endTime) - parseInt(localStorage.getItem('leaveTime'))) / 1000)
      recordingTime.value += leaveTime
      console.log('离开时间段', leaveTime, 's')
      recordingTimer.value = setInterval(() => {
        recordingTime.value += 1
      }, 1000)
      getToolState()
      getCloudState()
      getPacketInfo()
      break;
  }
}
// 获取设置的录制事件内容
const getSettingData = () => {
  querySettingData().then(res => {
    // 当返回真实数据后修改此处
    if (res.data.code === 200) {
      if (res.data.data.maxDuration !== 0) {
        hasSettingDataFlag.value = true
        settingData.value = res.data.data
      } else {
        hasSettingDataFlag.value = false
      }
    }
  }).catch(err => {
    console.log('error',err)
  }).finally(()=> {
    // console.log('123')
  })
}
// 开始录制按钮
const startRecording = () => {
  videoLoading.value = true
  startRecordingPacket({ userNum: '' })
    .then((response) => {
      if (response && response.status == 200) {
        let data = response.data.data
        if (data) { //data 返回值改为 任务id
          //获取当前文件夹
          getFolderName()
          recordingTime.value = 0 //每开始录制清空上次录制计时
          dataList.value = [] //每开始录制清空上次录制的数据包
          tagInfos.value = [] //每开始录制清空上次录制的打标签
          isStartFlag.value = true
          taskUUID.value = data //获取任务id
          //获取录制包信息
          setTimeout(() => {
            getPacketInfo() //先立马获取一个包展示
          }, 2000);
          packetTimer.value = setInterval(() => {
            //获取录制包信息
            getPacketInfo()
          }, 20000);
          // 开始录制计时
          recordingTimer.value = setInterval(() => {
            recordingTime.value += 1
          }, 1000);
        } else {
          ElMessage.error(data + ' 请重启后端')
        }
      }
    })
    .catch((err) => {
    }).finally(() => {
      videoLoading.value = false
    });
}
// 结束录制按钮
const stopRecording = () => {
  ElMessageBox.confirm('确认结束录制吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    customClass: 'restartConfirmBox'
  }).then(() => {
    videoLoading.value = true
    stopRecordingPacket().then((response) => {
      if (response && response.status == 200) {
        let data = response.data.data
        if (data == '成功') {
          isStartFlag.value = false
          isRecordFlag.value = false
          // 停止录制后，该接口需要继续调用5分钟
          setTimeout(() => {
            clearInterval(packetTimer.value); //录制包与录制状态
          }, 5 * 60000)
          recordingTime.value = 0 //每开始录制清空上次录制计时
          clearInterval(recordingTimer.value); //录制时长
        }
      }
    })
      .catch((err) => {
      }).finally(() => {

        videoLoading.value = false
      });

  }).catch((err) => {
  }).finally(() => {

  });
}
//获取当前文件夹
const getFolderName = () => {
  folderName()
    .then((response) => {
      if (response && response.status == 200) {
        let data = response.data.data || {}
        currentFolderName.value = data || ''
      }
    })
    .catch((err) => {
    }).finally(() => {
    });
}
//获取录制包信息
const getPacketInfo = () => {
  recordDataLoading.value = true
  echoRecordingPacketInfo()
    .then((response) => {
      if (response && response.status == 200) {
        dataList.value = []
        tagInfos.value = []
        let data = response.data.data || {}
        dataList.value = data.groups || []
        tagInfos.value = data.taskTags || []
      }
      recordDataLoading.value = false
    })
    .catch((err) => {
    }).finally(() => {
      recordDataLoading.value = false
    });
}
// 数采重启按钮
const restartFn = () => {
  if (restartLoading.value) return
  ElMessageBox.confirm('确认重启吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    customClass: 'restartConfirmBox'
  }).then(() => {
    restartLoading.value = true
    restartTime.value = 10
    restart()
      .then((response) => {
        if (response && response.status == 200) {
          let data = response.data.data
          if (data) {
            ElMessage.success('数采重启操作执行成功')
          }
        }
      }).catch((err) => {

      }).finally(() => {

      })
    console.log('restartLoading',restartLoading.value)
    restartTimer.value = setInterval(() => {
      if (restartTime.value >= 1) {
        restartTime.value -= 1
      }
      if (restartTime.value == 0) {
        clearInterval(restartTimer.value)
        restartLoading.value = false
      }
    }, 1000)
  })
    .catch((err) => {
    }).finally(() => {
      // restartLoading.value = false
    });
}
const closeSettingDrawer = (val) => {
  if (val) {
    hasSettingDataFlag.value = true //标记已设置录制参数
    // 获取已设置的事件录制内容
    getSettingData()
  }
  drawer.value = false
}
// 获取录制任务
const getInitRecordingTime = () => {
  getRecordState()
    .then((response) => {
      if (response && response.status == 200) {
        let data = response.data.data || {}
        isRecordFlag.value = data.isRecord || false
        //有录制任务
        if (data.isRecord) {
          //获取当前文件夹
          getFolderName()
          isStartFlag.value = true //标注已开始录制
          taskUUID.value = data.taskUUID //获取录制任务id
          // 获取录制参数(回显)
          reviewParamsForm.value = Object.assign({}, data.dataRecorderOptions)
          // 获取后台设置已选中的事件 (事件组回显)
          // if (((data.dataRecorderOptions || {}).recordParams || []).length > 0) {
          //   let event = data.dataRecorderOptions.recordParams || []
          //   console.log('home页的事件组回显', event)
          //   reviewTreeGroupData = event || []
          // }
          //录制时长
          recordingTime.value = parseInt(data.seconds)
          //录制进行中才计时   暂停不计
          if (data.taskStatue == 1) {
            recordingTimer.value = setInterval(() => {
              recordingTime.value += 1
            }, 1000);
          }
          //获取录制包信息
          setTimeout(() => {
            getPacketInfo() //先立马获取一个包展示
          }, 2000);
          packetTimer.value = setInterval(() => {
            //获取录制包信息
            getPacketInfo()
          }, 20000);
        }
        else {
          isStartFlag.value = false
        }
      }
    })
    .catch((err) => {
      console.log('获取初始化录制任务失败');
    }).finally(() => {
    });
}
// const formatTime = (time) => {
//   let result = parseInt(time)
//   let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
//   let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
//   let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
//   return `${h} : ${m} : ${s}`
// }
// 获取数采版本
const getSCVersion = () => {
  getCollectionVersion()
    .then((response) => {
      if (response && response.status == 200) {
        if (response.data.data) {
          scVersion.value = response.data.data
        }
      }
    })
    .catch((err) => {
    }).finally(() => {
    });
}
//获取NOS 版本号
const getNosVersion = () => {
  getADFVersion({})
    .then((response) => {
      if (response && response.status == 200) {
        let data = response.data.data || {}
        nosVersion.value = data
      }
    })
    .catch((err) => {
    }).finally(() => {
    });
}
// 获取DC版本
const getDcVersionList = () => {
  getDcVersion()
    .then((response) => {
      if (response && response.status == 200) {
        if (response.data.data) {
          dcVersionList.value = response.data.data
          // 当前版本与版本列表里的第一个不同，则表示有新版本需升级，显示消息提示框
          if (dcVersionList.value.length > 0 && scVersion.value !== '' && dcVersionList.value[0].dcVersion !== scVersion.value) {
            lastVersion.value = dcVersionList.value[0].dcVersion
            showNewVersionMessage.value = true
          } else {
            showNewVersionMessage.value = false
          }
        }
      }
    })
    .catch((err) => {
      showNewVersionMessage.value = false
    }).finally(() => {
    });
}
const openVersionModal = () => {
  versionModalVisible.value = true
  getDcVersionList()
}
const closeVersionModal = () => {
  versionModalVisible.value = false
}
// 获取工具状态
const getToolState = () => {
  toolState()
    .then((response) => {
      if (response && response.status == 200) {
        let data = response.data.data
        toolStateFlag.value = data || false
        getDiskInfo()
      }
    })
    .catch((err) => {
      toolStateFlag.value = false
      clearInterval(toolStateTimer.value)
    }).finally(() => {
    });
}
//获取磁盘信息
const getDiskInfo = () => {
  if (!toolStateFlag.value) return
  diskInfo()
    .then((response) => {
      if (response && response.status == 200) {
        let data = response.data.data
        diskInfoData.value = data || {}
      }
    })
    .catch((err) => {
    }).finally(() => {
    });
}
// 获取云端状态
const getCloudState = () => {
  cloudStatus()
    .then((response) => {
      if (response && response.status == 200) {
        let data = response.data.data
        cloudStateFlag.value = data || false
      }
    })
    .catch((err) => {
      cloudStateFlag.value = false
      clearInterval(cloudStateTimer.value)
    }).finally(() => {
    });
}
// 获取nas状态
const getNasState = () => {
  nasStatus()
    .then((response) => {
      if (response && response.status == 200) {
        let data = response.data.data || {}
        nasStatusFlag.value = !data.gkjNasStatus || !data.mdcNasStatus ? false : true
        nasStatusObj.value = data
        nasStatusList.value = [
          { name: 'mdc挂载nas盘', status: data.mdcNasStatus },
          { name: '工控机挂载nas盘', status: data.gkjNasStatus }
        ]
      } else {
      }
    })
    .catch((err) => {
    }).finally(() => {
    });
}
const getErrorMsg = (json) => {
  return !json ? [] : JSON.parse(json)
}
// 一键挂载nas
const singleNasFn = () => {
  // this.singleNasLoading = true
  singleNasAPI()
    .then((response) => {
      if (response && response.status == 200) {
        if (response.data.data) {
          ElMessage.success("一键挂载成功")
        } else {
          ElMessage.error("一键挂载失败")
        }
      } else {
      }
    })
    .catch((err) => {
      // console.log('获取故障失败')
    }).finally(() => {
      // this.singleNasLoading = false
    });
}

// 拷贝日志
const packOrinLog = () => {
  packOrinLogAPI()
    .then((response) => {
      if (response && response.status == 200) {
        if (response.data.code !== 400) {
          ElMessage.success("开始拷贝日志至NAS，请稍候...")
        } else {
          ElMessage.error(response.data.msg)
        }
      } else {
      }
    })
    .catch((err) => {
    }).finally(() => {
    });
}

// 拷贝nos版本
const copyNosVersion = () => {
  return copyToClip(nosVersion.value)
}
</script>

<style scoped>
.recordStatusText {
  width: 12%;
  font-size: 0.8rem;
}

.nasStatusText {
  width: 10%;
  font-size: 0.8rem;
}

.title-icon {
  width: 2.14rem;
  height: 2.14rem;
  display: inline-block;
  border-radius: 10px;
  text-align: center;
  vertical-align: middle;

  >i {
    font-size: 1.4rem;
    --color: #fff;
    vertical-align: -webkit-baseline-middle;
  }
}

.title-text {
  margin-left: 8px;
  font-weight: bold;
  font-size: 18px;
  vertical-align: middle;
}

.top {
  width: 100%;
  height: 300px;
  background: #fff;
  padding: 1.4rem;
}

.bottom {
  margin-top: 1.4rem;
  width: 100%;
  height: calc(100% - 1.4rem - 300px);
  background: #fff;
  padding: 1.4rem;
}

.home-layout {
  width: 100vw;
  height: 110vh;
  min-width: 1000px;
  min-height: 990px;
  overflow: auto;
  padding: 10px;
  background: #ededed;
  .restart_time{
    font-size: 2.5rem;
    font-weight: bold;
    color: #6366f1;
    position: fixed;
    top: 35%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2001;
  }
}

.el-container {
  display: flex;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}

.left {
  width: 350px;
  height: 100%;
}

.middle {
  padding: 0;
  margin: 0 1.4rem;
  width: calc(100% - 740px);
  min-width: 300px;
  height: 100%;
  background: #fff;
  padding: 1.4rem;
}

.right {
  width: 350px;
  height: 100%;

}

.operation-block {
  padding: 10px;

  .operation-block-1 {
    position: relative;

    .time-block {
      top: 2rem;
      position: absolute;
      cursor: default;
    }
  }

  .operation-block-2 {
    margin-top: 10px;
  }

  .operation-block-item {
    display: inline-block;
    cursor: pointer;
    width: 50%;

    &:not(.time-block):hover {
      opacity: 0.7;
    }
  }

  .video-icon {
    display: inline-block;
    width: 3.57rem;
    height: 3.57rem;
    font-size: 1rem;
    margin-top: 6px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    position: relative;

    >i {
      color: #fff;
      position: absolute;
      top: calc(50% - 15px);
      left: calc(50% - 15px);
    }
  }
}

.setting-event-group-name {
  display: block !important;
  margin: 8px 0;
  line-height: 32px;
  color: #65646b;
  font-size: 14px;
}

.no-setting-data {
  padding: 1.4rem;
  text-align: center;
}

.vehicle-info-block {
  margin-top: 1rem;

  .status-ul {
    .status-block {
      height: 200px;
      padding: 1.4rem 1.4rem 10px;
      margin-bottom: 1rem;
      background: linear-gradient(to right, #ecefef, #f9f9f9);
    }
  }
}

.status-ul {
  .status-block {
    height: 200px;
    padding: 1.4rem;
    margin-bottom: 2.14rem;
    font-size: 14px;
    color: #050505;
    border-radius: 12px;

    p {
      line-height: 2.14rem;
    }
  }

  .car-info {
    height: 320px;
  }
}

.event-status {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
}

.note-icon {
  margin-left: 10px;
  border-radius: 50%;
  width: 1.7rem;
  height: 1.7rem;
}

.update-icon {
  cursor: pointer;
  margin-left: 10px;
  border-radius: 50%;
  width: 1.7rem;
  height: 1.7rem;

  &:hover {
    opacity: 0.7;
  }
}

/* 居中icon样式 */
.center-icon {
  position: relative;

  >i {
    position: absolute;
    top: calc(50% - 7px);
    left: calc(50% - 7px);
  }
}

.state-block {
  margin-top: 1.8rem;

  .status-block {
    &:nth-child(1) {
      background: linear-gradient(to right, #f1f0e8, #f9f9f9);
    }

    &:nth-child(2) {
      background: linear-gradient(to right, #dbe2f3, #f9f9f9);
    }
  }
}

.home-tooltip {
  font-size: .86rem !important;
  max-width: 35%;
}

.el-icon-error,
.redText {
  color: #ef4444;
}

/* 中间录制的样式 */
.record-files-block {
  margin: 14px 0;

  .file-location {
    line-height: 2.2;
  }

  .btn-history {
    color: #fff;
    float: right;
  }
}

.zl-bag-msg-dialog {
  margin-top: 53vh !important;
  margin-left: 23% !important;

  .el-dialog__header {
    padding: 10px 15px 0;

    .el-dialog__headerbtn {
      top: 10px;
    }
  }

  .el-dialog__body {
    padding: 0 10px;
  }
}

/* 录制文件列表 */
.bag-list {
  margin-top: 10px;
  overflow: auto;
  height: 30vh;

  .bag-title {
    height: 35px;
    line-height: 35px;
    color: #fff;
    padding: 0 10px;
    background: rgb(164, 150, 228);
    font-size: 1rem;
    display: flex;
    justify-content: start;

    .group-name {
      float: left;
      width: 65%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .external-copy-status {
      width: 20%;
      text-align: right;
    }

    .bag-status {
      width: 15%;
      text-align: right;
    }
  }

  .status-red {
    color: #f12a2a;
  }

  .status-green {
    color: #67c23a;
  }
}
</style>
<style>
  .el-loading-spinner{
    display: none !important;  
  }

.el-message-box.restartConfirmBox {
  padding: 1.57rem !important;

  .el-message-box__btns {
    .el-button--primary {
      background: #6366f1;

      &:hover {
        background: #6181f463;
      }
    }

    .el-button {
      &:hover {
        background: #6181f463;
        border: 1px solid #6366f1;
        color: #6366f1;
      }
    }
  }

  .el-message-box__close:hover {
    color: #6366f1;
  }
}

.el-drawer__header {
  margin-bottom: 0px;
  padding: 14px;
  border-bottom: 1px solid #ddd;

  .el-drawer__title {
    font-weight: bold;
  }
}

.el-drawer__body {
  padding: 0;
}

.el-icon.el-drawer__close {
  color: #6366f1;
}

.cell i.el-tooltip__trigger {
  vertical-align: middle;
  font-size: 16px;
}
</style>
<style scoped>
@media screen and (max-width:1200px) {
  .bottom {
    overflow: auto;
  }

  .status-block {
    padding: 15px !important;
    height: 170px;
  }

  .state-block {
    margin-top: 15px;

    .status-block.car-info {
      height: 300px;
      margin-bottom: 15px;
    }
  }
}
</style>
